<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>Google Maps JavaScript API Example</title>
   <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAABfEOGxAzfje6hPBY_qDiiBSfqhHulARE8dJ7-cT0beqFVPf8NxQwxY_26X7wtezxbTjtH5jZwthXVw&sensor=true"
           type="text/javascript"></script>
    <script type="text/javascript">

   function initialize() {
     if (GBrowserIsCompatible()) {
       var map= new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(39.9493, 116.3975), 13);
     }
   }

	var map;
	var baseIcon;
	var currLayer = [];
	
	//准备数据
	function prepData(){
		
		d[0] = {"title":"罗湖莲塘互联网产业集聚区","latitude":"22.44574","longitude":"113.59486", "icon":icon};
	
	}
	
	function initialize() {
		
		
		map= new GMap2(document.getElementById("map_canvas"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(22.543001,114.061089), 11);
		map.enableScrollWheelZoom();
		//map.openInfoWindow(map.getCenter(),document.createTextNode("ZhiHuiGuan:Tong Yuan Road Information Building Two Floor"));
		
		var loc = new GLatLng(22.543001,114.061089);
		var marker = new GMarker(loc, {
			draggable:true
		});
		GEvent.addListener(marker, "dragstart", function(){
			map.closeInfoWindow();
		});
		GEvent.addListener(marker, "dragend", function(){
			marker.openInfoWindowHtml("正在更新位置...");
		});
		//map.addOverlay(marker);
		//map.openInfoWindow(map.getCenter(),document.createTextNode("深圳市"));
		
		//实现搜索
		map.enableGoogleBar();

		

		// Create a base icon for all of our markers that specifies the
		// shadow, icon dimensions, etc.
		baseIcon= new GIcon(G_DEFAULT_ICON);
		baseIcon.shadow= "http://www.google.cn/mapfiles/shadow50.png";
		baseIcon.iconSize= new GSize(32, 32);
		baseIcon.shadowSize= new GSize(37, 34);
		baseIcon.iconAnchor= new GPoint(9, 34);
		baseIcon.infoWindowAnchor= new GPoint(9, 2);
		
		line();
		doMap();
	}

	
	// Creates a marker whose info window displays the letter corresponding
	// to the given index.
	function createMarker(point, index) {
	
		var titles = ["大沙河创新走廊研发及总部基地",
						"深圳湾区战略性新兴产业总部基地",
						"留仙洞新兴产业总部基地",
						"华为科技城新一代通信产业基地",
						"光明新型平板显示产业基地",
						"深圳软件产业基地",
						"坪山深圳国家生物产业基地核心区",
						"现代农业生物育种创新示范区（深圳国家农业科技园区）",
						"蛇口网谷互联网产业基地",
						"龙岗核电产业基地"
						
		];
		
		 // Create a lettered icon for this point using our icon class
		 var letter= String.fromCharCode("A".charCodeAt(0) + index);
		 var letteredIcon= new GIcon(baseIcon);
		  //letteredIcon.image= "http://www.google.cn/mapfiles/marker" + letter+ ".png";
			letteredIcon.image= "images/1.gif";
		
		 // Set up our GMarkerOptions object
		  markerOptions= { icon:letteredIcon};
		 var marker= new GMarker(point, markerOptions);
		
		 GEvent.addListener(marker, "click", function() {
		    marker.openInfoWindowHtml("<b>" + titles[index]+ "</b>");
		 });
		 return marker;
	}
	
	function doMarker(point, title, icon){
	
		var letteredIcon= new GIcon(baseIcon);
		letteredIcon.image= icon;
		// Set up our GMarkerOptions object
		markerOptions= { icon:letteredIcon};
		var marker= new GMarker(point, markerOptions);
		
		GEvent.addListener(marker, "click", function() {
		    marker.openInfoWindowHtml("" + title);
		 });
		 return marker;
	}
	
	function map1()
	{

		// Add 10 markers to the map at random locations
		var bounds= map.getBounds();
		var southWest= bounds.getSouthWest();
		var northEast= bounds.getNorthEast();
		var lngSpan= northEast.lng() - southWest.lng();
		var latSpan= northEast.lat() - southWest.lat();
		
		for (var i= 0; i< 1; i++) {
		
			//var lat = southWest.lat() + latSpan * Math.random();
			//var lng = southWest.lng() + lngSpan * Math.random();
			
			var lat = 22.44574;
			var lng = 113.59486;
			
		 var point= new GLatLng(lat,
		                          lng);
		                          alert(lat + "," + lng);
		  map.addOverlay(createMarker(point, i));
		}
	}
	
	function doMap(){ 
		
		//创建新图层时删除之前图层
		for (j=0;j<currLayer.length;j++){
			map.removeOverlay(currLayer[j]);
		}
		
		currMarker = [];
		
		var d = [];
		
		var icon = "images/1.gif";
		
		
		//d[1] = {};
		
		for (j=0; j<d.length; j++){ 
			
			 var obj = d[j];
			 var point = new GLatLng(obj["latitude"], obj["longitude"]);
			 var marker = doMarker(point,obj["title"],obj["icon"]);
			 map.addOverlay(marker);
			 currLayer[j] = marker;
		}
		
		
	}
	
	function removeAll()
	{
		map.removeOverlay();
	}
	
	function clearAll()
	{
		map.clearOverlays();
	}
		
	function rect() {
			
		
			 var polygon= new GPolygon([
			 	//map.setCenter(new GLatLng(22.54, 114.06), 13);
			 	new GLatLng(22.726,113.757),
				new GLatLng(22.739,113.764),
				new GLatLng(22.746,113.776),
				new GLatLng(22.752,113.790),
				new GLatLng(22.760,113.794),
				new GLatLng(22.766,113.792),
				new GLatLng(22.776,113.801)
				

			 ], "#f33f00", 0, 1, "#ff0000", 0.3);
			 map.addOverlay(polygon);
			
		}
		
		function line(){
		
			var polyline = new GPolyline([
				new GLatLng(22.726,113.757),
				new GLatLng(22.739,113.764),
				new GLatLng(22.746,113.776),
				new GLatLng(22.752,113.790),
				new GLatLng(22.760,113.794),
				new GLatLng(22.766,113.792),
				new GLatLng(22.776,113.801),
				new GLatLng(22.784,113.813),
				new GLatLng(22.792,113.827),
				new GLatLng(22.795,113.852),
				new GLatLng(22.798,113.884),
				new GLatLng(22.794,113.903),
				new GLatLng(22.783,113.917),
				new GLatLng(22.791,113.935),
				new GLatLng(22.787,113.948),
				new GLatLng(22.770,113.977),
				new GLatLng(22.760,113.991),
				new GLatLng(22.753,114.007),
				new GLatLng(22.746,114.027),
				new GLatLng(22.733,114.053),
				new GLatLng(22.725,114.076),
				new GLatLng(22.715,114.103),
				new GLatLng(22.706,114.120)
				
			],"#f33f00",6,0.5,0.3);
			map.addOverlay(polyline);
		
		}

   </script>
 </head>
 <body onload="initialize();" onunload="GUnload()">
   <div id="map_canvas" style="width: 100%; height: 600px"></div>
   
   <a href="javascript:;" onclick="doMap0()">重点产业园分布图</a> 
   <a href="javascript:;" onclick="map2()">各区产业功能定位图</a>
   <a href="javascript:;" onclick="map3()">战略性新兴产业基地分布图</a>
   <a href="javascript:;" onclick="map4()">产业集聚区分布图</a>
   <a href="javascript:;" onclick="clearAll();">清除</a>
   <span id="tip"></span>
 </body>
</html>
